<template>
  <div class="allPage">
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> {{ pageTitle }} </span>
      </template>
    </el-page-header>
    <el-row :gutter="10" type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="16" :lg="14" :xl="12">
        <el-card class="box-card" v-if="activePath == '202' || activePath == '203'">
          <div v-for="(item, index) in zxbConArray" :key="item.title1">
            <h3 v-show="title2IsNull(item)">
              <span style="font-size: 0.8em;">▎</span>
              <span>{{ item.title1 }}</span>
            </h3>
            <div v-for="(item2, index2) in item.arr" :key="item2.infoKey" v-show="item2.con">
              <h4>{{ item2.title2 }}</h4>
              <span>{{ item2.con }}</span>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" v-else>
          <div v-for="(item, index) in contentArray" :key="item.title"
            v-show="item.content !== null && item.content.trim()">
            <h3 :style="index === 0 ? 'margin-top:0px' : ''">{{ item.title }}</h3>
            <p v-html="item.content"></p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
// 引入依赖=====================================
import { onMounted, ref, reactive, computed } from "vue";
//引入 pinia 
import { useCounterStore } from "@/stores/counter";
const useStore = useCounterStore()
// 引入pinia解构
import { storeToRefs } from 'pinia'
//引入路由
import { useRouter } from "vue-router";
let router = useRouter()
// 引入json
import infoJson from "@/assets/info.json";
// 引入axios
import { get, post } from '../plugin/axios'
// 引入中西病名内容格式化函数
import formatting from "@/utils/zxbmFormatter.js";
// 数据声明=====================================
const pageTitle = ref('页面标题')
const contentArray = reactive([])
const { dataInfo } = storeToRefs(useStore) // 解构pinia
const zxbConArray = ref([]) //中西病内容
const activePath = window.sessionStorage.getItem('activePath') //当前所在索引
// 自动调用函数
setKey()
// 计算属性=====================================
const title2IsNull = computed(() => (item) => {
  let num = 0
  item.arr.forEach(item2 => {
    if (item2.con == '') {
      num++
    }
  })
  if (num == item.arr.length) {
    return false
  } else {
    return true
  }
})
// 生命周期=====================================

// 业务逻辑=====================================
//返回列表页
function goBack() {
  router.go(-1)
}
//设置字段值
function setKey() {
  if (activePath == '202' || activePath == '203') {
    setZxyInfo()
    return
  }
  switch (activePath) {
    case '302': case '304':
      var arr = infoJson.zcy
      break;
    case '303':
      var arr = infoJson.cy
      break
    default: []
      break;
  }
  arr.forEach(item => {
    for (const key in dataInfo.value) {
      if (key == 'info_name' || key == 'infoYm') {
        pageTitle.value = dataInfo.value[key]
      }
      if (item.originKey == key) {
        item.content = dataInfo.value[key]
        break
      }
    }
  });
  contentArray.push(...arr)
}
// 设置中西医病名内容 标题及字段名由后台传递
function setZxyInfo() {
  console.log('设置中西医内容');
  let param = {
    id: dataInfo.value.id
  }
  // 获取内容详情
  get('/api/yyjk/disease/findDiseaseById', param).then(data => {
    delete data.flag;
    delete data.zlly;
    delete data.comment;
    delete data.originIds;
    zxbConArray.value = formatting(data)
    console.log('中西病名格式化后的数据：', zxbConArray.value);
  }).catch(err => {
    console.log(err);
  })
}
</script>
<style lang="less" scoped>
.allPage {
  padding: 10px;
  padding-top: 0px;
}

.el-page-header {
  top: 0px;
  width: 100%;
  z-index: 999;
  padding: 10px;
  position: sticky;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

.el-card {
  text-align: left;
  margin-top: 10px;
}
</style>